<template>
  <el-dialog
    :title="brand.id ? '编辑品牌' : '添加品牌'"
    :visible.sync="visible"
    width="550px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form
      size="small"
      :rules="rules"
      :model="form"
      ref="brandForm"
      label-width="90px"
    >
      <el-form-item label="中文名称" prop="zh_name">
        <el-input v-model="form.zh_name"></el-input>
      </el-form-item>
      <el-form-item label="英文名称" prop="en_name">
        <el-input v-model="form.en_name"></el-input>
      </el-form-item>
      <el-form-item label="缩写" prop="brand_name">
        <el-input v-model="form.brand_name"></el-input>
      </el-form-item>
      <el-form-item label="图片" prop="brand_img">
        <el-upload
          action="https://wx.chengkenet.com/api/common/upload/"
          :headers="{
            Authorization: `Bearer ${getToken()}`
          }"
          list-type="picture-card"
          :on-remove="coverRemove"
          :on-success="coverUpload"
          :file-list="form.brand_img"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
          <div slot="tip" class="el-upload__tip">建议尺寸：90px*90px</div>
        </el-upload>
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input type="number" :min="0" v-model="form.sort"></el-input>
      </el-form-item>
      <!-- <el-form-item label="链接" prop="links">
        <el-input v-model="form.links"></el-input>
      </el-form-item> -->
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addBrand } from "@/api/good-mng";
import { getToken } from "@/utils/auth";
export default {
  props: ["visible", "brand"],
  data() {
    return {
      form: {
        zh_name: null,
        en_name: null,
        brand_name: null,
        brand_img: [],
        links: '/',
        sort: 0
      },
      rules: {
        zh_name: [
          { required: true, message: "请输入中文名称", trigger: "blur" }
        ],
        en_name: [
          { required: true, message: "请输入英文名称", trigger: "blur" }
        ],
        // brand_name: [
        //   { required: true, message: "请输入品牌缩写", trigger: "blur" }
        // ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        // links: [{ required: true, message: "请输入链接", trigger: "blur" }],
        brand_img: [{ required: true, message: "请上传图片", trigger: "blur" }]
      }
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
        if (Object.keys(this.brand).length) {
          this.form.zh_name = this.brand.zh_name;
          this.form.en_name = this.brand.en_name;
          this.form.brand_name = this.brand.brand_name;
          this.form.sort = this.brand.sort;
          this.form.links = this.brand.links;
          if (this.brand.brand_img) {
            this.form.brand_img.push({ name: "", url: this.brand.brand_img });
          }
        }
      } else {
        this.$refs["brandForm"].resetFields();
        this.form.brand_img = [];
      }
    }
  },
  methods: {
    submit() {
      this.$refs["brandForm"].validate(valid => {
        if (valid) {
          let obj = { ...this.form };
          obj.brand_img = obj.brand_img[0] ? obj.brand_img[0].url : "";
          obj.id = this.brand.id ? this.brand.id : null;
          addBrand(obj).then(res => {
            if (res.code === 200) {
              this.$message({
                message: this.brand.id ? "修改成功" : "添加成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        }
      });
    },
    coverUpload(response, file, fileList) {
      this.form.brand_img.push({ name: "", url: response.data.file });
    },
    coverRemove(file, fileList) {
      this.form.brand_img.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.form.brand_img.splice(index, 1);
          return;
        }
      });
    },
    getToken() {
      return getToken();
    }
  },
  created() {}
};
</script>

<style>
</style>
